<template>
  <rj-modal
    :title="$t('common.receiveProject')"
    :visible="show"
    :width="'60vw'"
    :footer="null"
    @cancel="handleModalCancel"
  >
    <rj-table
      :columns="columns"
      :data-source="tableData"
      :rowKey="(record) => record.id"
      :loading="loading"
      :pagination="{}"
    >
      <template slot="opt" slot-scope="text, record">
        <rj-space v-if="record.state === 'PENDING'">
          <a-popconfirm
            placement="top"
            :ok-text="$t('devices.comfirm')"
            :cancel-text="$t('devices.cancel')"
            @confirm="() => handelImport(record.id)"
          >
            <template slot="title"> {{ $t('groupOperate.sureget') }} </template>
            <a>{{ $t('groupOperate.reject') }}</a>
          </a-popconfirm>

          <a-popconfirm
            placement="top"
            :ok-text="$t('devices.comfirm')"
            :cancel-text="$t('devices.cancel')"
            @confirm="() => handelReject(record.id)"
          >
            <template slot="title">
              {{ $t('groupOperate.surereject') }}
            </template>
            <a>{{ $t('groupOperate.getreject') }}</a>
          </a-popconfirm>
        </rj-space>
        <div v-else>
          {{ status[record.state] || $t('authUser.unknow') }}
        </div>
      </template>
    </rj-table>
  </rj-modal>
</template>

<script>
import { RjTable, RjModal } from '@components';
import { requestHttp, maccApi } from '@utils/index';
export default {
  name: 'ProjectPend',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          title: this.$t('groupOperate.netname'),
          align: 'center',
          dataIndex: 'groupName',
          key: 'groupName',
        },
        {
          title: this.$t('groupOperate.handle'),
          align: 'center',
          dataIndex: 'fromUserName',
          key: 'fromUserName',
        },
        {
          title: this.$t('intnetpenetration.opert'),
          align: 'center',
          scopedSlots: { customRender: 'opt' },
        },
      ],
      status: {
        PENDING: this.$t('groupOperate.pendingget'),
        IMPORTING: this.$t('groupOperate.getding'),
        IMPORTED: this.$t('groupOperate.getye'),
        CANCEL: this.$t('groupOperate.cancle'),
        CLOSED: this.$t('groupOperate.shut'),
      },
      loading: false,
    };
  },
  components: {
    RjModal,
    RjTable,
  },
  watch: {
    show(n) {
      if (n) {
        this.initPendTable();
      }
    },
  },
  methods: {
    async initPendTable() {
      this.loading = true;
      const api = maccApi.PROJECT_NETWORK_LIST_GET_API;
      const {
        code,
        msg = this.$t('groupOperate.fialgetlist'),
        groups = [],
      } = await requestHttp({ api, method: 'GET' });
      this.loading = false;
      if (code === 0) {
        this.tableData = groups;
      } else {
        this.$message.error(msg);
      }
    },
    handleModalCancel() {
      console.log('close');
      this.$emit('close');
    },
    //接收项目
    async handelImport(id) {
      const api = maccApi.PROJECT_NETWORK_IMPORT_POST_API.replace('{id}', id);
      const {
        code,
        msg = this.$t('groupOperate.getprojectfail'),
      } = await requestHttp({
        api,
        method: 'POST',
        params: {},
      });
      if (code == 0) {
        const projectTotal = this.$store.state.User.project;
        this.$store.dispatch('User/setProject', projectTotal + 1);
        this.$store.dispatch('Group/updataGroupTree');
        this.$store.dispatch('User/getWarnCount');
        this.$store.dispatch('devices/getDeviceTotal', {
          include_fitap: true,
        });
        this.initPendTable();
      } else {
        this.$message.error(msg);
      }
    },
    //拒绝接收
    async handelReject(id) {
      const api = maccApi.PROJECT_NETWORK_REJECT_POST_API.replace('{id}', id);
      const {
        code,
        msg = this.$t('groupOperate.failproject'),
      } = await requestHttp({
        api,
        method: 'POST',
        params: {},
      });
      if (code == 0) {
        this.initPendTable();
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
